<template>
  <div>
    <table-data ref="table" :config="table_config" :searchFormConfig="search_form_config">
      <template v-slot:status="slotData">
        <el-switch :disabled="slotData.data.id == switch_disabled" @change="switchChange(slotData.data)" v-model="slotData.data.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </template>
      <template v-slot:test="slotData" >
        <el-button @click="hanldeUnlockCar(slotData)" size="small">车辆释放</el-button>
      </template>
    </table-data>
    <MapLocation :flagVisible.sync="flagVisible" :parking_data="parking_data" />
  </div>
</template>

<script>
import { CarsStatus, CarsDelete,CarsUnLock } from "@/api/cars.js"
import CityArea from "@/components/common/cityArea"
import MapLocation from "@/components/dialog/showMapLocation"
import TableData from "@c/tableData"
import {address,yearCheckType,energyType} from "@/utils/common.js"

export default {
  name: "Parking",
  components: {
    CityArea,
    MapLocation,
    TableData
  },
  data() {
    return {
      table_config: {
        isShowSearchForm: true,
        thead:[
          {label:"车牌型号",prop:"carsMode"},
          {label:"中文名",prop:"nameCh"},
          {label:"英文名",prop:"nameEn"},
          {label:"Logo",prop:"imgUrl",type:"image",width:70},
          {label:"缩略图",prop:"carsImg",type:"image",width:70},
          {
            label:"年检",
            prop:"yearCheck",
            type: "function",
            callback:(row, prop) => {
              return yearCheckType(row[prop]);
            }
          },
          {
            label:"状态",
            prop:"carsStatus",
            type: "function",
            callback:(row)=> {
              const obj = this.$store.state.config.cars_status;
              const status = obj[row.carsStatus];
              return status ? status.label : "";
            }
          },
          {
            label:"能源类型",
            prop:"energyType",
            type: "function",
            callback:(row, prop) => {
              return energyType(row[prop]);
            }
          },
          {
            label:"区域",
            prop:"address",
            type: "function",
            callback: (row, prop) => {
              return address(row[prop])
            }
          },
          {label:"停车场",prop:"parkingName"},
          {
            label:"禁启用",
            prop:"status",
            type: "slot",
            slotName: "status"
          },
          {
            label:"操作",
            type: "operation",
            width: 250,
            default: {
              deleteKey: "id",
              deleteBtn: true,
              editBtn: true,
              editBreakLink: "CarsAdd",
              editBtnEvent: true, // 如果需要自定义编辑事件，则传入true
            },
            slotName: "test" // 自定义按钮插槽
          },
        ],
        url: "carsList",
        data: {
          pageSize: 10,
          pageNumber: 1
        }
      },
      table_loading: false,
      parking_data: {},
      flagVisible: false,
      parking_status: this.$store.state.config.parking_status,
      parking_type: this.$store.state.config.parking_type,
      parking_type_json: this.$store.state.config.parking_type_json,
      value: "",
      search_form_config: {
        form_item: [
          {label:"城市",type:"City"},
          {label:"类型",prop:"parkingType",type:"Select",width: "120px",options:"parking_type"},
          {label:"禁启用",prop:"status",type:"Select",width: "120px",options:"radio_disabled"},
          {label:"关键字",type:"Keyword",options: ["parkingName","address"]},
        ],
        form_handler: [
          {label: "新增", prop:"add", type:"success",element:"link",router:"/carsAdd"},
          // {label: "测试", prop:"test", type:"success",element:"btn",handler:this.test},
        ]
      },
      form: {
        area: "",
        type: "",
        status: "",
      },
      search_key: "",
      keyword: "",
      switch_disabled: "",
      rowId: ""
    }
  },
  methods: {
    hanldeUnlockCar(data) {
      CarsUnLock({id:data.data.id}).then((res) => {
        this.$message({
          type: "success",
          message: res.message
        })
      })
    },
    switchChange(data) {
      const requestData = {
        id: data.id,
        status: data.status
      }
      this.switch_disabled = data.id;
      CarsStatus(requestData)
        .then((res) => {
          this.$message({
            type: 'success',
            message: res.message
          });
          this.switch_disabled = "";
        })
        .catch(()=>{this.switch_disabled = "";})
    },
    // onDelete(id) {
    //   this.$confirm('是否删除?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     this.rowId = id;
    //     CarsDelete({id})
    //       .then((res) => {
    //         this.$message({
    //           type: 'success',
    //           message: res.message
    //         });
    //         this.rowId = ""
    //         this.$refs.table.requestData();
    //       }) 
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     });  
    //     this.rowId = "";       
    //   });
    // },
    getType(value) {
      const data = this.parking_type.filter(item => item.value == value)
      if(data && data.length > 0) {
        return data[0].label
      }
    },
    showLocation(row) {
      this.flagVisible = true
      this.parking_data = row
    },
    // search() {
    //   const data = {
    //     pageSize: 10,
    //     pageNumber: 1
    //   }
    //   const filterData = JSON.parse(JSON.stringify(this.form))
    //   for(let key in filterData) {
    //     if(filterData[key]) {
    //       data[key] = filterData[key]
    //     }
    //   }
    //   if(this.keyword && this.search_key) {
    //     data[this.search_key] = this.keyword;
    //   }
    //   this.$refs.table.requestData(data);
    // },
    // edit(id) {
    //   this.$router.push({
    //     name: "CarsAdd",
    //     query: {id}
    //   })
    // },
  }
}
</script>

<style lang="scss" scoped>

</style>